define(['view', 'iscroll', 'slider'], function(View, iscroll, slider){
  return View.extend({

    el: '#HomeView',

    events: {
      'click .loadMoreBtn': 'loadMore'
    },

    initialize: function(query, path) {
      this.template = _.template($('#posts-temp').html());
      this.$content = $('.content');
      this.$postsContainer = $('#posts-container');
      this.myScroll = new IScroll('#home-scroll', {
        click: true,
        probeType: 2,
        preventDefaultException: { tagName: /^(INPUT|TEXTAREA|SELECT)$/ }
      });

      slider.init($('.slider-container'), {
        moveDistance: 65, 
        auto: true, 
        interval: 2000
      }, this);

      this.tabbarSlider();

      this.myScroll.on('scrollEnd', function() {
         // console.log(this.y)
      })
    },

    render: function() {
    },

    show: function() {
    },

    hide: function() {
    },

    loadMore: function() {
      this.$postsContainer.append(this.template({length: 2}));
      this.myScroll.refresh();
    },

    tabbarSlider: function() {
      var $dom = $('.tab-bar');
      var domWidth = $dom.width();
      var clientWidth = this.getClientSize().clientWidth;
      var touchPos = {
        startX: 0,
        endX: 0,
        moveX: 0
      }
      var overflowX = (domWidth - clientWidth > 0) ?  domWidth - clientWidth : 0;
      $dom.on('touchstart', function(e) {
        touchPos.startX = e.originalEvent.touches[0].pageX;
      });
      $dom.on('touchmove', function(e) {
        e.preventDefault();
        touchPos.endX = e.originalEvent.touches[0].pageX;
        var deltaX = touchPos.endX - touchPos.startX;
        $dom.css({
          '-webkit-transform': 'translate3d(' + (touchPos.moveX + deltaX) + 'px, 0, 0)',
          'transform': 'translate3d(' + (touchPos.moveX + deltaX) + 'px, 0, 0)',
          '-webkit-transition': '-webkit-transform 0s',
          'transition': 'transform 0s'
        })
      }.bind(this));
      $dom.on('touchend', function() {
        touchPos.moveX += touchPos.endX - touchPos.startX;
        if (touchPos.moveX > 0) {
          $dom.css({
            '-webkit-transform': 'translate3d(0, 0, 0)',
            'transform': 'translate3d(0, 0, 0)',
            '-webkit-transition': '-webkit-transform .3s',
            'transition': 'transform .3s'
          });
          touchPos.moveX = 0;
        } else if (Math.abs(touchPos.moveX) > overflowX) {
          $dom.css({
            '-webkit-transform': 'translate3d(' + -overflowX + 'px, 0, 0)',
            'transform': 'translate3d(' + -overflowX + 'px, 0, 0)',
            '-webkit-transition': '-webkit-transform .3s',
            'transition': 'transform .3s'
          });
          touchPos.moveX = (-overflowX);
        }
      }.bind(this))
    }

  })
})